<template>
	<view class="personal">
		<view class="user-section">
			<image class="user-section-bg" :src="profile.backgroundUrl ? profile.backgroundUrl : '../../static/images/personal/bgImg2.jpg'"></image>
			<view class="user-info-box">
				<image :src="profile.avatarUrl ? profile.avatarUrl : '../../static/images/personal/missing-face.png'"></image>
				<text>{{ profile.nickname ? profile.nickname : '游客' }}</text>
			</view>
			<view class="vip-card-box">
				<view class="user-enter-vip">
					<view class="left-txt">
						会员
					</view>
					<view class="right-recharge">
						<view class="btn">立即开通</view>
					</view>
				</view>
				<view class="vip-message">
					<view>
						<view class="app-name">wy_music会员</view>
						<view>开通会员听歌</view>
					</view>
					<image class="bg" src="../../static/images/personal/vip-card-bg.png"></image>
				</view>
			</view>
		</view>
		<view class="container">
			<image src="../../static/images/personal/arc.png"></image>
			<view class="nav">
				<view class="nav-item" v-for="(nav, index) in navBar" :key="index">
					<text class="icon" :class="nav.icon"></text>
					<view class="text">{{ nav.text }}</view>
				</view>
			</view>
			<view class="line_20"></view>
			<view class="personal-content">
				<view class="login-box" v-if="JSON.stringify(profile) === '{}'">
					<view class="title">最近播放</view>
					<view class="login-content">
						请
						<text class="login-btn" @click="toLogin">登录</text>
						后查看
					</view>
				</view>
				<view class="personal-content-item" v-else>
					<text>最近播放</text>
					<text class="iconfont icon-you"></text>
				</view>
				<view class="personal-content-item">
					<text>喜欢音乐</text>
					<text class="iconfont icon-you"></text>
				</view>
				<view class="personal-content-item">
					<text>创建歌单</text>
					<text class="iconfont icon-you"></text>
				</view>
				<view class="personal-content-item">
					<text>收藏歌单</text>
					<text class="iconfont icon-you"></text>
				</view>
				<view class="personal-content-item" v-if="JSON.stringify(profile) !== '{}'">
					<text class="login_out" @click="handleLoginout">退出登录</text>
				</view>
			</view>
		</view>
		<BottomBar ref="btmBarRef"></BottomBar>
	</view>
</template>

<script>
	import { getUserInfo, loginout } from '../../api/index.js'
	import BottomBar from '../index/childComps/BottomBar.vue'
	export default {
		data() {
			return {
				profile: {},
				navBar: [
					{icon: 'iconfont icon-wodexiaoxi-copy', text: '我的消息' },
					{icon: 'iconfont icon-haoyou', text: '我的好友' },
					{icon: 'iconfont icon-tubiaozhizuomoban', text: '个人主页' },
					{icon: 'iconfont icon-gexinghua', text: '个性装扮' }
				] 
			}
		},
		components:{ BottomBar },
		onLoad() {
			this.getUserInfoFun()
		},
		methods: {
			async getUserInfoFun () {
				// 得到用户id
				const uid = uni.getStorageSync('userId') || this.$store.state.userId
				if (uid) {
					const res = await getUserInfo(uid)
					// 存储用户信息
					this.profile = res.data.profile
				}
			},
			// 跳转到登录页面
			toLogin() {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			// 退出登录
			handleLoginout() {
				uni.showModal({
					title: '退出登录',
					content: '是否退出登录?',
					success: async (res) => {
						if (res.confirm) {
							await loginout()
							// 重置
							uni.removeStorageSync('token')
							uni.removeStorageSync('cookies')
							uni.removeStorageSync('userId')
							this.profile = {}
							uni.showToast({
								title: '登出成功!',
								mask: true,
								icon: 'none'
							})
						} else if (res.cancel) {
							uni.showToast({
								title: '取消登出!',
								mask: true,
								icon: 'none'
							})
						}
					}
				});
			}
		},
		onShow() {
			// 等待DOM加载完毕后在执行，子组件 BottomBar的初始化数据函数
			this.$nextTick(function(){
				this.$refs.btmBarRef.initData()
			})
		}
	}
</script>

<style lang="scss" scoped>
	.personal {
		background-color: #f5f5f5;
		height: 100%;
		// 用户信息及用户vip
		.user-section {
			width: 100%;
			height: 33vh;
			// 处理外边距塌陷
			position: relative;
			overflow: hidden;
			.user-section-bg {
				width: 100%;
				height: 100%;
			}
			.user-info-box {
				position: absolute;
				top: 0;
				margin: 70rpx 0 30rpx 30rpx;
				image {
					width: 150rpx;
					height: 150rpx;
					border-radius: 50%;
					vertical-align: middle;
				}
				text {
					font-size: 37rpx;
					margin-left: 20rpx;
					color: white;
				}
			}
			.vip-card-box {
				height: 240rpx;
				position: absolute;
				top: 250rpx;
				background: rgba(0, 0, 0, 0.7);
				margin: 0 30rpx;
				border-radius: 20rpx;
				color: #f7d680;
				padding: 20rpx 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				.user-enter-vip {
					display: flex;
					justify-content: space-between;
					.right-recharge {
						.btn {
							background-color: #f7d680;
							color: black;
							font-size: 28rpx;
							border-radius: 20rpx;
							padding: 3rpx 13rpx;
							z-index: 1;
							position: relative;
						}
					}
				}
				.vip-message {
					display: flex;
					justify-content: space-between;
					.app-name {
						font-size: 40rpx;
						margin-bottom: 15rpx;
					}
					.bg {
						width: 380rpx;
						height: 260rpx;
						transform: translate(20rpx, -50rpx);
					}
				}
			}
		}
		// 用户工具
		.container {
			position: relative;
			&>image {
				width: 100%;
				height: 36rpx;
				position: absolute;
				top: -40rpx;
			}
			.nav {
				display: flex;
				padding: 30rpx;
				margin: 20rpx 30rpx;
				border-radius: 10rpx;
				background-color: #ffffff;
				.nav-item {
					flex: 1;
					text-align: center;
					.icon {
						font-size: 50rpx;
						color: #d43c33;
					}
					.text {
						font-size: 26rpx;
						margin-top: 10rpx;
					}
				}
			}
			.personal-content {
				background-color: #ffffff;
				border-radius: 15rpx;
				margin: 20rpx 30rpx;
				padding: 0 20rpx;
				font-size: 28rpx;
				.login-box {
					padding: 15rpx 0;
					border-bottom: #f5f5f5 solid 1rpx;
					.login-content {
						.login-btn {
							color: red;
						}
					}
				}
				.personal-content-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 70rpx;
					line-height: 70rpx;
					border-bottom: #f5f5f5 solid 1rpx;
					.login_out {
						color: #C8C7CC;
					}
				}
			}
		}
	}
</style>
